<template>
  <div class="NewSongs">
    <div class="title">
      <div class="container">
        <span v-for="(item, index) in title" :key="index" @click="itemClick(index)" :class="{ active: currentIndex === index }">{{ item }}</span>
      </div>
    </div>
    <component :is="currentComponent" :list="list" @itemClick="listClick"></component>
  </div>
</template>

<script>
import List from '@/components/list/List';
import MenuList from '@/components/list/MenuList';
export default {
  data() {
    return {
      title: ['新歌速递', '新碟上架'],
      currentIndex: 0,
      list: [],
      currentComponent: 'List',
    };
  },
  computed: {},
  created() {
    this.getNewSongs();
  },
  components: { List, MenuList },
  methods: {
    itemClick(index) {
      this.list = [];
      this.currentIndex = index;
      switch (index) {
        case 0:
          this.getNewSongs();
          this.currentComponent = 'List';
          break;
        case 1:
          this.getNewAlbums();
          this.currentComponent = 'MenuList';
      }
    },
    //获取新歌速递
    async getNewSongs() {
      const { data } = await this.$request('/top/song', { type: 0 });
      this.list = data;
    },
    //获取新蝶上架
    async getNewAlbums() {
      const res = await this.$request('/album/newest');
      this.list = res.albums;
    },
    //list点击
    listClick(id) {
      if (this.currentComponent === 'List') {
        this.$store.commit('getSongsId', id);
      } else {
        this.$router.push('/albumdetail/' + id);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.NewSongs {
  .title {
    text-align: center;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    .container {
      width: 250px;
      border-radius: 15px;
      border: solid 1px $grayHover;
      span {
        width: 50%;
        display: inline-block;
        font-size: 13px;
        color: #303133;
        padding: 5px 10px;
        border-radius: 15px;
        &:hover {
          background-color: rgba(160, 158, 158, 0.081);
        }
      }
      .active {
        background-color: rgba(128, 128, 128, 0.531);
        color: #fff;
      }
    }
  }
}
</style>